@mixin size($w: false, $h: false) {
  @if $w {
    width: $w;
  }

  @if $h {
    height: $h;
  }
}

@mixin position(
  $position,
  $top: false,
  $bottom: false,
  $left: false,
  $right: false,
  $z-index: false
) {
  position: $position;

  @if $top {
    top: $top;
  }

  @if $bottom {
    bottom: $bottom;
  }

  @if $left {
    left: $left;
  }

  @if $right {
    right: $right;
  }

  @if $z-index {
    z-index: $z-index;
  }
}

@mixin vertical-center($left: false, $right: false) {
  @include position(absolute, 50%, false, $left, $right);

  transform: translateY(-50%);
}

@mixin horizontal-center($top: false, $bottom: false, $type: false) {
  @if $type == 'margin' {
    margin-left: auto;
    margin-right: auto;
  } @else {
    @include position(absolute, $top, $bottom, 50%, false);

    transform: translateX(-50%);
  }
}

@mixin center {
  @include position(absolute, $top: 50%, $left: 50%);

  transform: translateX(-50%) translateY(-50%);
}

@mixin content-vertical-center($type: false, $line-height: false) {
  @if $type == 'inline' and $line-height {
    line-height: $line-height;
  } @else if {
    display: flex;
    align-items: center;
  }
}

@mixin content-horizontal-center($type: false) {
  @if $type == 'inline' {
    text-align: center;
  } @else if {
    display: flex;
    justify-content: center;
  }
}

@mixin content-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin text(
  $family: false,
  $size: false,
  $weight: false,
  $color: false,
  $letter-space: false,
  $line-height: false
) {
  @if $family {
    font-family: $family;
  }

  @if $size {
    font-size: $size;
  }

  @if $weight {
    font-weight: $weight;
  }

  @if $color {
    color: $color;
  }

  @if $letter-space {
    letter-spacing: $letter-space;
  }

  @if $line-height {
    line-height: $line-height;
  }
}

@mixin draw($background: false, $border: false) {
  @if $background {
    background: $background;
  }

  @if $border {
    border: $border;
  }
}

@mixin text-overflow-hidden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin text-shadow {
  text-shadow: 0px 0px 0px #eee, 0px 1px 0px #ccc, 0px 2px 0px #bbb,
    0px 3px 0px #aaa, 0px 4px 0px #999, 0px 5px 0px #888, 0px 6px 0px #777,
    0px 7px 0px #666, 0px 8px 0px #555, 0px 9px 0px #444, 0px 10px 0px #333,
    0px 10px 10px #333;
}
